<template>
  <t-dialog :header="row ? `修改学习资料-${row.materialsName}` : '新增学习资料'" :visible.sync="visible" :onClose="closeDialog"
    :closeOnOverlayClick="false" :onConfirm="onClick" width="40%" top="5%">
    <div style="height: 40vh; width: 100%; display: flex">
      <t-form :data="formData" labelWidth="140px" style="margin: auto;width: 100%;">
        <t-form-item label="学习资料名称：" name="materialsName">
          {{ formData.materialsName }}
        </t-form-item>
        <t-form-item label="学习资料类型：" name="materialsFormat">
          {{ formData.materialsFormat }}
        </t-form-item>
        <t-form-item label="外部链接：" name="materialsUrl">
          {{ formData.materialsUrl }}
        </t-form-item>
        <t-form-item label="附件：" name="sysAttMainVo">
          <template v-if="formData.fileLists.length > 0">
            <div v-for="(item, index) in formData.fileLists" :key="index">
              <a class="t-button-link" target="_blank" :href="item.url">
                {{ item.name }}
              </a>
            </div>
          </template>
          <div v-else>无</div>
        </t-form-item>
      </t-form>
    </div>
  </t-dialog>
</template>

<script>
import FileUpload from "@/components/FileUpload/index.vue"
import { getFiles } from '@/api/common';

export default {
  components: {
    FileUpload
  },
  dicts: ['materials_format'],
  props: {
    objId: [String, Number],
    header: String,
    row: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      visible: true,
      formData: {
        fileLists: [],
        materialsName: '',
        materialsFormat: '',
        materialsUrl: '',
        moduleKey: 'zjkxxzl',
        sysAttMainVo: {
          sysAttMainIds: [],
        }
      },
    };
  },
  created () {
    if (this.row) {
      getFiles(this.row.id)
        .then((res) => {
          res.data.forEach((item) => {
            this.formData.fileLists.push({
              name: item.fileName,
              url: item.fullFilePath,
              id: item.id,
              filePath: item.filePath,
            });
          });
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });


      this.$api.zjk.learning.detailLearningMaterials(this.row.id).then(res => {
        this.formData.materialsName = res.data.materialsName
        this.formData.materialsFormat = res.data.materialsFormat
        this.formData.materialsUrl = res.data.materialsUrl

      }).catch(e => {
        this.$message.error(e.toString())
      })
    }
  },
  methods: {
    closeDialog () {
      this.$emit('update:visible', false);
    },
    onClick () {
      this.closeDialog()
    }
  },
};
</script>
